.bg{width: 100%;height: 100%;background: url(../img/bg.png)no-repeat;background-size:cover ;}
.foot a{position: relative;padding: 10px 50px;color: #fff;}
.foot a.line:after,.foot a.line:before{position: absolute;width: 1px;height: 12px;content: '';background: #fff;top: 10px;}
.foot a.line:after{left: 0;}
.foot a.line:before{right: 0;}
.foot{position: fixed;width: 100%;left: 0;bottom: 0;}
.form_bg{width: 451px;background: url(../img/bg1.png)no-repeat; background-size:100% 100%  ; margin: 150px auto;}
.form_box{padding: 45px 60px;}
.form_list{width: 100%;height: 40px;border: 1px solid #ABABAB;border-radius:30px;overflow: hidden;}
.form_list input{border: none; width: 70%;height: 40px;line-height: 40px;}
.form_list img{padding: 0 2% 0 5%;}
.form_list input.generate_code{width: 108px;right: 10px;color: #23262A;text-align: center;}
.de_code{display: none;width:370px;height:230px;background:rgba(255,255,255,1);border-radius:16px;
padding: 50px 0 80px 0;position: fixed;top: 50%;margin-top: -260px;left: 50%;margin-left: -188px;z-index: 50;}
.de_code_img{width: 45%;margin-top: 40px;}

.main_left{width: 28%;height: 100%;}
.mian_user{width: 19%;height: 100%;background:linear-gradient(180deg,rgba(49,147,245,1),rgba(87,185,255,1));}
.mian_friends{width: 81%;}
.main_right{width: 72%;height: 100%;background: #f4f4f4;}
.head{width: 70%;border-radius: 50%;}
.height100{height: 100%;}
.mian_user_icon li{width:100%;padding: 15px 0;text-align: center;}
.mian_user_icon li.active{background:rgba(47,136,224,1);}
html,body{height: 100%;}
.add{width:100% ;bottom: 20px;left: 0;}
.seach_box{padding: 13px 0;margin: auto}
.seach_box input{width: 90%;height: 35px; background: #F0F0F0;border: none;text-align: center;}
.seach_img{left: 35%;top:25px;}
.friends_box li{padding: 12px 14px;cursor: pointer;position: relative;}
.friends_head{width:40px;height:40px;border-radius:50%;margin-right: 8px;}
.mian_friends{height: 100%;background: #fff;overflow: auto;}
body{max-width: 1200px;margin: auto}
.bage{position: absolute;width:16px;height:16px;background:rgba(249,56,56,1);border-radius:50%;top: 10px;right: 10%;text-align: center;font-size: 12px;color: #fff;}
.main {overflow: hidden;}
.friends_box li.active{background: #E5F2FF;}
.msg_top{border-bottom: 1px solid #E6E6E6;height: 60px;padding: 0 30px;line-height: 60px;}
.mgs_box{width: 100%;height: 145px;background: #fff;left: 0;bottom: 0;}
.msg_inp{width: 95%;padding: 0px 2.5%;border: none;background: #fff;height: 50px;}
.msg_inp:focus{outline: none;}
.send{width:56px;height:26px;line-height: 26px;background:rgba(240,240,240,1);border-radius:4px;color: #808080;text-align: center;margin-right: 30px;}
.msg_head{width: 34px;height: 34px;border-radius:50%;}
.msg_left{margin: 15px 0 0 30px;}
.msg_font{color: #232323;padding: 8px 13px;text-align: left;}
.msg_box{border-radius:8px;margin:0 20px;}
.msg_left .msg_box{background: #fff;}
.msg_box i{ width:0;height:0;border-style:solid; top: 8px;}
.msg_left .msg_box i{border-width:10px 10px 10px 0;border-color:transparent #fff transparent transparent;/*透明 灰 透明 透明 */left: -10px;}
.msg_right{margin: 15px 30px 0 0px;}
.msg_right .msg_box i{ border-width:10px 0 10px 10px; border-color:transparent transparent transparent #D0E9FD;right:-10px ;}
.msg_right .msg_box{background: #D0E9FD;}
.msg_img{width:117px;height:120px;}
.add_frient_seach{width:300px;height:30px;background:rgba(230,230,230,1);border-radius:4px;line-height: 30px;margin:25px auto;}
.add_frient_seach img{width: 14px;margin-left: 7px;vertical-align: middle;}
.add_frient_seach input{width: 85%;border: none; background: transparent;}
.add_frient_box{padding: 10px 30px;}
.add_frient dl{padding: 20px 0;border-bottom: 1px solid #E6E6E6;}
.add_frient dl dt img{width: 40px;height: 40px;border-radius:50% ;vertical-align: middle;}
.add_frient dl dd{width: 92%;}
.main_right_content,.about_friends{display: none;}
.main_right_content.active,.about_friends.active{display: block;}
.user .btn-a{width:138px;height:36px;text-align: center;line-height: 36px;}
.user_head{width: 60px;height: 60pe;border-radius:50%;margin-bottom: 20px;}
.laber{width: 240px;text-align: left;margin: auto;}
.laber span{width: 50%;}
.user{margin-top: 90px;}
.bg_yell{background: #FBAEAE;}
.msg_content dl dd{max-width: 90%;}
.mask{
	width:380px;
	background:rgba(255,255,255,1);
	border-radius:10px;
	left: 50%;
	top: 50%;
	margin-top: -125px;
	margin-left: -160px;
	position: fixed;
	z-index: 60;
	display: none;
}
.mask_main{
	width: 80%;
	margin: auto;
	border: 1px solid #E5E5E5;
	height: 124px;
}
.mask_main textarea{
	width: 94%;
	height: 86%;
	padding: 3%;
	border: none;
}
.mask_main textarea:focus{outline: none;}

.mask_foot a{
	width:90px;
	height:30px;
	border-radius:4px;
	color: #fff;
	margin: 20px ;
	text-align: center;
	line-height: 30px;
}
.mask_foot a:first-child{
	background: #ABD0F5;
}
.mask_foot a:last-child{
	background:rgba(49,147,245,1);
}









































@media only screen and (max-width: 480px) {
	.main_left {
	    width: 30%;
	    height: 100%;
	}
	.main_right{
		width: 70%;
	}
	.friends_box dl dd{
		width: 60%;
	}
	.friends_head{
		width: 25px;
		height:25px;
	}
	.mian_friends{
		width: 65%;
	}
	.mian_user{
		width: 35%;
	}
	.friends_box li{
		padding: 3px;
	}
}